我,一名軟體測試工程師(QA)。這是我第一次參加 IT 邦幫忙鐵人賽,主題是:用 30 天從零學會 JavaScript,並做出一個能玩的小型戰鬥遊戲《勇者 vs 小怪》。
最近因為薪水的關係,我開始認真思考轉職。一位做全端(前端+後端都會)的同事建議我可以先從 JavaScript 入手——先學前端,之後再接續後端。
剛好我的主管也建議我參加這次鐵人賽,豐富履歷。主管推薦的是 AI Engineering 組(打造 AI 相關系統的組別),但我想了很久,始終沒辦法想清楚「做 AI Engineering 最後要交出什麼樣的成果」。
最後我選了 JavaScript。它是前端入門很成熟的工具,而且最打動我的一點是:學東西的過程中,能不能親眼看到成果,對我來說是維持動力很重要的一環。至於最終目標,我想到小時候玩過的網頁小遊戲——就決定了,這 30 天,我要試著做出一個屬於自己的網頁遊戲。
以上我會盡力而為,視情況調整最終分配天數,會以有成果為優先。
今天的目標很單純——確認我的電腦能跑 JavaScript。我裝了 VS Code(一款免費的程式碼編輯器),寫了第一支使用 JavaScript 的程式:
<!DOCTYPE html>
<html>
<body>
<h1>Hello, JS!</h1>
<script>
console.log("鐵人賽 Day 1 開跑");
</script>
</body>
</html>
這幾行看起來很簡單,但我用測試工程師的習慣,對結果多問了幾次「為什麼」,順便搞懂了三件事。
雙擊打開這支程式,畫面上看到「Hello, JS!」的大標題,但程式碼裡 console.log("鐵人賽 Day 1 開跑") 這一句,卻沒有出現在畫面上。
我沒有假設這是程式寫錯,而是先去查了 console.log 是做什麼用的——原來它印出來的地方,不是網頁畫面,而是瀏覽器裡一個叫「主控台(Console)」的地方,專門給工程師看程式執行的過程用(按鍵盤的 F12 就能打開)。一般使用者平常根本不會看到它。這讓我發現,原來瀏覽器裡藏著一整套「給工程師看」的工具,是我以前當一般使用者時完全不會注意到的。
用滑鼠雙擊打開這支程式,主控台跳出一條英文警告,大意是「不安全的存取方式」。我查了一下才知道:用雙擊直接打開檔案,跟透過一個小型伺服器程式打開網頁,瀏覽器對待這兩種方式的信任程度不一樣,直接雙擊會被當成比較不安全的方式,限制也比較多。
解法是裝一個叫 Live Server 的 VS Code 擴充功能,它會在我的電腦裡開一個小型伺服器,讓網頁用比較正式的網址方式打開(像 http://127.0.0.1:5500/...),而不是直接開檔案。這樣做也比較接近一個網站真正上線後的樣子。
裝好 Live Server 後,主控台又多印出一行字,標示著「第 36 行」。但我自己寫的程式明明只有 8、9 行,哪來的第 36 行?
我沒有直接相信「這是我寫的東西」,而是動手確認:我原本的檔案根本沒有那麼多行,所以這行字一定不是我自己打的。後來搞懂了,原來是 Live Server 這個工具,會偷偷把自己的一小段程式碼,加進我的網頁檔案裡,用來提供「自動重新整理」的功能。瀏覽器看到的「第 36 行」,是加料之後的行號,不是我原始檔案的行號。
這件事讓我確認了一個道理:訊息裡寫的「檔名+行號」,只代表這段程式碼現在執行的位置,不代表它是誰寫的。這跟我在 QA 工作中學到的原則很像:看到一個錯誤訊息,不能照單全收,要自己動手查證來源,才能真的搞懂問題出在哪裡。
Day 1 還沒寫到「真正」的 JavaScript 邏輯,但透過確認這三件事,我搞懂了:
我的程式碼倉庫(GitHub repo)已經建好了:ironman-js-battle,之後每天寫的程式碼都會存到這裡。
明天開始要學真正的 JavaScript 語法:變數與資料型別。
iThome鐵人賽
看影片追技術